<DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="javascript/vue-element-ui/index.css">
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
  <script src="javascript/vue-element-ui/vue.min.js"></script>
  <script src="javascript/vue-element-ui/index.js"></script>
  <script src="javascript/vue-element-ui/axios.min.js"></script>
  <script src="javascript/echarts.min.js"></script>
</head>
<body>
	<div class="app" id="index_list">
		<el-card class="box-card">
			<h1>{{title}}</h1>
			<div style="width: calc(100% - 40px); display: inline-block; height: 650px;" id="myChart" ref="echartsref" class="content_chart"></div>
		</el-card>
	</div>
</body>
<script type="text/javascript">
	var index_list = new Vue({
		el: '#index_list',
		data:{
			title:'天气在线项目接口性能检测',
			myChart:'',
			data: [],
			now: +new Date(1960, 9, 3),
			oneDay: 24 * 3600 * 1000,
			value: Math.random()*1000,
		},
		mounted(){
			this.content_chart()
			setInterval(()=>{ 
				for (var i = 0; i < 15; i++) {
			        this.data.shift();
			        this.data.push(this.randomData());
			    }
			    // console.log(this.data[0].value[1])

			    myChart.setOption({
			        series: [{
			            data: this.data
			        }]
			    });
			}, 1000)
		},
		created(){
			
		},
		methods:{
			content_chart:function(){
				for (var i = 0; i < 2000; i++) {
				    this.data.push(this.randomData());
				}

				myChart = echarts.init(document.getElementById('myChart'))
		        myChart.setOption({
                    title: {
				        text: ''
				    },
				    grid: {
		                left: '3%',
		                right: '0%',
		                bottom: '3%',
		                top:'5%',
		            },
				    tooltip: {
				        trigger: 'axis',
				        formatter: function (params) {
				            params = params[0];
				            var date = new Date(params.name);
				            return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' : ' + params.value[1];
				        },
				        axisPointer: {
				            animation: false
				        }
				    },
				    xAxis: {
				        type: 'time',
				        splitLine: {
				            show: true
				        }
				    },
				    yAxis: {
				        type: 'value',
				        show:true,
				        boundaryGap: [0, '100%'],
				        splitLine: {
				            show: true
				        }
				    },
				    series: [{
				        name: '模拟数据',
				        type: 'line',
				        showSymbol: false,
				        lineStyle: {
			                color: '#0677bf',
			                width: 1
			            },
				        areaStyle: {
				        	color:'rgba(1,155,255,0.2)'
				        },
				        hoverAnimation: false,
				        data: this.data
				    }]
                })
		    },
		    randomData:function() {
			    this.now = new Date(+this.now + this.oneDay)
			    this.value = this.value + Math.random() * 21 - 10
			    return {
			        name: this.now.toString(),
			        value: [
			            [this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate()].join('/'),
			            Math.round(this.value)
			        ]
			    };
			}
		}
	})
</script>
<style type="text/css">
#index_list{
	width: calc(100% - 20px);
	margin:10px;
	height: calc(100% - 20px);
	box-sizing: border-box;
	float: left;
}
.el-card{
	height: 100%;
}
</style>
</html>	